<template>
  <div>
    <el-card class="search-card">
      <BasicTableForm
        ref="formData"
        isScalingBtn
        :colNumOfRow="4"
        :formColumns="formItemList"
        :dataSource="formData"
        :hasQueryPermission="false"
        :defaultExpandStatus="false"
        :handleSearchForm="getTableDataAction"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showActionCol
        :showSelectCol="false"
        showPagination
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :total="pagination.totalNum"
        :selectionChange="selectionChange"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicTableForm from '@stock/components/BasicForm';
import BasicTable from '@/components/skusTable';
import { getTableAction } from '@/utils/getBtnsRender';
import { getOAUrlToAction } from '@/utils/getUtils';
import { getRecordListService } from '@api/stock/stockOverflowRecord';
import { FORM_ITEM, RECORD_TABLE_COLUMNS } from './constants';
import { mapGetters } from 'vuex';

export default {
  components: {
    BasicTableForm,
    BasicTable
  },
  data () {
    return {
      formItemList: FORM_ITEM,
      formData: {
        recordNo: null, // 单据编号
        pusherName: null, // 提交人名称
        auditUserName: null, // 审核人名字
        commitState: null, // 审核状态
        skuNo: null
      },
      tableInfo: {
        list: [],
        columns: RECORD_TABLE_COLUMNS,
        loading: false,
        selection: []
      },
      loadingFn: state => { this.tableInfo.loading = state },
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      pageSizes: [10, 20, 30, 40],
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  mounted () {
    this.getTableDataAction();
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [{ label: '查看', method: this.handleToView }];
      if (row.commitState === 'COMMIT') {
        actionList.push({ label: '审核', method: this.handleToAudit });
      }
      if (row.commitState == 'OK' || row.commitState == 'FAIL') {
        actionList.push({ label: '审批记录', method: this.handleToAuditRecord });
      }
      return getTableAction({ h, row, actionList, showBtn: this.showBtn });
    },
    // 审核
    handleToAudit (row) {
      getOAUrlToAction(row.workflowRequestId, this.loadingFn);
    },
    // 审批记录
    handleToAuditRecord (row) {
      getOAUrlToAction(row.workflowRequestId, this.loadingFn);
    },
    // 查看
    handleToView (row) {
      var urlObj = null;
      switch (row.commitType) {
        case 'stockAttrScrap' :
          // 报废申请单
          urlObj = this.$router.resolve({
            name: 'viewScrapApplication',
            query: { recordNo: row.recordNo }
          });
          break;
        case 'stockAttrOtherRecord' :
          // 留存销售,打折退厂,内部促销类型的数据提交后单据类型为存量溢出处理
          urlObj = this.$router.resolve({
            name: 'stockOverflowOtherRecord',
            query: { recordNo: row.recordNo }
          });
          break;
        case 'stockAttrTransferRecord' :
          // 跨区域转货申请单
          urlObj = this.$router.resolve({
            name: 'viewTransferGoods',
            query: { recordNo: row.recordNo }
          });
          break;
      }
      if (urlObj) {
        window.open(urlObj.href, '_blank');
      } else {
        this.$message.error('不支持查看明细的单据类型');
      }
    },
    // 获取表格数据 by 查询表单
    async getTableDataAction () {
      Object.keys(this.formData).forEach(key => {
        if (this.formData[key] === '') {
          this.formData[key] = null;
        }
      })
      const param = {
        ...this.pagination,
        ...this.formData
      };
      const res = await getRecordListService(param, state => { this.tableInfo.loading = state })
      if (res) {
        const { results, totalNum } = res.retData;
        this.tableInfo.list = results;
        this.pagination.totalNum = totalNum;
      }
    },
    // 勾选需要处理的库存
    selectionChange (rows) {
      this.tableInfo.selection = rows;
    },
    // 获取表单内容
    getFormData (data) {
      this.formData = data;
    },
    // 页码切换
    handlePageChange (val) {
      this.pagination.nowPage = val;
      this.getTableDataAction();
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.pagination.pageShow = val;
      this.getTableDataAction();
    }
  }
};
</script>
